<!DOCTYPE html>
<html>
<head>
    <title>IndexedDB</title>
    <script type="javascript" >
        alert("kkkkkkkkkkkkk");
    </script>
</head>
<body>


<input type="text" id="name" placeholder="name" />
<input type="email" id="email" placeholder="email">
<button id="AddData">Add Data</button>

<script type="javascript">
    alert("start....");
    var db;
    function indexDBOk() {
        return "indexedDB" in window;
    }

    document.addEventListener("DOMContentLoaded", function(){
        console.log("start...");
        alert("start......");
        if (!indexDBOk()) {
            console.log("not support");
            return;
        }

        var openRequest = indexedDB.open("idarticle_people", 1);
        openRequest.onupgradeneeded = function(e) {
            var thisDB = e.target.result;

            if (!thisDB.objectStoreName.contains("people")) {
                thisDB.createObjectStore("people");
            }
        }

        openRequest.onsuccess = function(e) {
            console.log("running onsuccess");
            db = e.target.result;

            document.querySelector("#AddData").addEventListener("click", addPersion,false);

        }

        openRequest.onerror = function(e) {
            console.log("open error");
        }
    }, false);

    function addPersion(e) {
        var name = document.querySelector("#name").value;
        var email = document.querySelector("#email").value;

        console.log("About to add " + name + "/" + email);

        var transaction = db.transaction(["people"], "readwrite");
        var store = transaction.objectStore("people");

        var persion = {
            name: name,
            email: email,
            created: new Date()
        }

        var request = store.add(persion, 1);
        request.onerror = function(e) {
            console.log("Error", e.target.error.name);
        }

        request.onsuccess = function(e) {
            console.log("Yes, Did it");
        }
    }
</script>
</body>
</html>